<template>
  <el-dialog
    :title="$t('page.import')"
    width='500px'
    @close='handleClose'
  >
    <el-form ref='importForm' :model='importForm' :rules='importRule' @submit.prevent.native label-position="top">
      <el-form-item :label="$t('device.sn')+':'" prop='devSn'>
        <el-input
          v-model='importForm.devSn'
          show-word-limit
          maxlength='32'
          @blur='() => importForm.devSn = importForm.devSn.trim()'
        />
      </el-form-item>
    </el-form>
    <template #footer>
    <span class='dialog-footer'>
        <el-button text @click='handleClose'>{{ $t('page.cancel') }}</el-button>
        <el-button
          type='primary'
          :loading='loading'
          @click="confirmImport('importForm')"
        >{{ $t('page.confirm') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>

import { addBatchDevice } from '@/api/batch'

export default {
  props: {
    batchId: String
  },
  data() {
    return {
      importRule: {
        devSn: [
          {
            required: true,
            message: this.$t('batch.tip_addSn'),
            trigger: 'blur'
          },
          {
            min: 6,
            max: 32,
            message: this.$t('batch.tip_nameLength', { min: 6, max: 32 }),
            trigger: 'blur'
          }
        ]
      },
      importForm: {
        batchId: this.batchId,
        devSn: ''
      },
      loading: false
    }
  },
  computed: {},
  methods: {
    messageFilter(status) {
      const messageMap = {
        'SUCCESS': this.$t('batch.message.success_tip'),
        'NOT_EXIST': this.$t('batch.message.not_exist_tip'),
        'STATUS_ERROR': this.$t('batch.message.status_error_tip'),
        'NO_POWER': this.$t('batch.message.no_power_tip'),
        'REPEAT': this.$t('batch.message.repeat_tip'),
        'DELETED': this.$t('batch.message.deleted_tip'),
        'TRANSFERRING': this.$t('batch.message.transferring_tip'),
        'HAS_BIND': this.$t('batch.message.has_bind_tip'),
        'TID_AND_SN_NOT_MATCH': this.$t('batch.message.tid_and_sn_not match_tip'),
        'DEVICE_NOT_BIND_OPERATOR': this.$t('batch.message.device_not_bind_operator_tip')
      }
      return messageMap[status]
    },
    handleClose() {
      this.$refs['importForm'].resetFields()
      this.$emit('update:model-value', false)
    },
    confirmImport(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          addBatchDevice(this.importForm).then((res) => {
            this.loading = false
            if (res !== undefined && res !== '') {
              if (res.message === undefined || res.message === null || res.message === '') {
                this.$message.error(
                  this.$t('batch.tip_addDevice_error3', res)
                )
              } else {
                this.$message.error(this.messageFilter(res.code))
              }
            } else {
              this.handleClose()
              this.$message.success(this.$t('page.add_success'))
              this.$emit('refreshDataList')
            }
          }).catch((e) => {
            this.$confirmError(e)
          }).finally(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style>
</style>
